import { StopOutlined } from '@ant-design/icons'
import { ReactNode, useEffect, useState } from 'react'
import './ManageTabs.css'

interface Props {
  selectKey: string // 默认选中的key
  myList: PropsItem[] // 菜单列表
  getMsgFromMyManageTabs: Function
}

interface PropsItem {
  key: string // 当前item的key
  nextkey: string[] // 下一步可操作的key
  icon: ReactNode // 未选中时的icon
  selectIcon: ReactNode // 选中时的icon
  title: string // 标题名称
  state: number // item的状态：0 未进行 | 1 进行中 | 2 已完成
}

function ManageTabs(props: Props) {
  const { selectKey, myList } = props
  const [selectItem, setSelectItem] = useState(selectKey)
  const [operator, setOperator] = useState<boolean[]>([])
  const [tips, setTips] = useState<string[]>([])

  useEffect(() => {
    console.log('myList', myList)
    console.log('selectKey', selectKey)
    let temp: string[] = []
    for (let i = 0; i < myList.length; i++) {
      if (myList[i].state === 0 || myList[i].state === 1) {
        temp.push(myList[i].key)
        for (let j = 0; j < myList[i].nextkey.length; j++) {
          temp.push(myList[i].nextkey[j])
        }
      }
    }
    let operatorTemp = operator
    for (let i = 0; i < myList.length; i++) {
      let flag = 0
      operatorTemp.push(false)
      for (let j = 0; j < temp.length; j++) {
        if (myList[i].key === temp[j]) {
          flag = 1
          break
        }
      }
      if (flag) {
        operatorTemp[i] = true
      }
    }
    setOperator([...operatorTemp])

    let tipsTemp = tips
    for (let i = 0; i < myList.length; i++) {
      let str =
        (myList[i].state === 0
          ? '已完成'
          : myList[i].state === 1
          ? '进行中'
          : '未完成') +
        '/' +
        (operatorTemp[i] ? '可操作' : '不可操作')
      console.log(str)
      tipsTemp.push(str)
    }
    setTips([...tipsTemp])
  }, [])

  const onSelectItem = (index: number) => {
    if (operator[index] && myList[index].key !== selectItem) {
      let sendValue = {
        item: { ...myList[index] },
        index: index,
      }
      setSelectItem(myList[index].key)
      props.getMsgFromMyManageTabs(sendValue)
    }
  }

  return (
    <div className="manage-tabs">
      <div className="scroll-hidden">
        <div className="scroll">
          <div className="manage-tabs__list">
            {myList.map((item, index) => {
              if (index === myList.length - 1) {
                return (
                  <div
                    className={
                      operator[index]
                        ? 'manage-tabs__item cursor__pointer'
                        : 'manage-tabs__item cursor__not-allowed'
                    }
                    key={index}
                    onClick={() => onSelectItem(index)}
                    title={item.title + tips[index]}>
                    <div className="manage-tabs__item-top">
                      <div
                        className={
                          item.state === 1 || selectItem === item.key
                            ? 'manage-tabs__item-icon ongoing-item'
                            : item.state === 0
                            ? 'manage-tabs__item-icon finshed-item'
                            : operator[index]
                            ? 'manage-tabs__item-icon undone-item'
                            : 'manage-tabs__item-icon unselectable'
                        }>
                        {item.state === 1 || selectItem === item.key
                          ? item.selectIcon
                          : item.icon}
                      </div>
                      <div style={{ width: '20px', height: '1px' }}></div>
                    </div>
                    <div
                      className={
                        selectItem === item.key
                          ? 'manage-tabs__item-name select-color'
                          : 'manage-tabs__item-name'
                      }>
                      {item.title}
                      &nbsp;
                      {operator[index] ? null : (
                        <StopOutlined style={{ color: 'rgb(230, 4, 4)' }} />
                      )}
                    </div>
                    <div
                      className={
                        selectItem === item.key
                          ? 'manage-tabs__item-detail select-color'
                          : 'manage-tabs__item-detail'
                      }>
                      {tips[index]}
                    </div>
                  </div>
                )
              } else {
                return (
                  <div
                    className={
                      operator[index]
                        ? 'manage-tabs__item cursor__pointer'
                        : 'manage-tabs__item cursor__not-allowed'
                    }
                    key={index}
                    onClick={() => onSelectItem(index)}
                    title={item.title + tips[index]}>
                    <div className="manage-tabs__item-top">
                      <div
                        className={
                          item.state === 1 || selectItem === item.key
                            ? 'manage-tabs__item-icon ongoing-item'
                            : item.state === 0
                            ? 'manage-tabs__item-icon finshed-item'
                            : operator[index]
                            ? 'manage-tabs__item-icon undone-item'
                            : 'manage-tabs__item-icon unselectable'
                        }>
                        {item.state === 1 || selectItem === item.key
                          ? item.selectIcon
                          : item.icon}
                      </div>
                      <div
                        className={
                          item.state === 0
                            ? 'manage-tabs__item-arrow finshed-item'
                            : item.state === 1
                            ? 'manage-tabs__item-arrow ongoing-item'
                            : 'manage-tabs__item-arrow'
                        }></div>
                    </div>
                    <div
                      className={
                        selectItem === item.key
                          ? 'manage-tabs__item-name select-color'
                          : 'manage-tabs__item-name'
                      }>
                      {item.title}
                      &nbsp;
                      {operator[index] ? null : (
                        <StopOutlined style={{ color: 'rgb(230, 4, 4)' }} />
                      )}
                    </div>
                    <div
                      className={
                        selectItem === item.key
                          ? 'manage-tabs__item-detail select-color'
                          : 'manage-tabs__item-detail'
                      }>
                      {tips[index]}
                    </div>
                  </div>
                )
              }
            })}
          </div>
        </div>
      </div>
    </div>
  )
}

export default ManageTabs
